<template>
  <div class="bigScreenBox">
    <div class="innerBox">
      <div class="title">OSCE考试抽号系统</div> 
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="身份证号">
          <!-- <el-form-item label="身份证号" prop="IDNumber"> -->
          <el-input size="large" clearable v-model="ruleForm.IDNumber" style="width: 300px;" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="查询信息">
          <div class="infoBox" v-if="this.checkInfo.anonymousNumber.length < 9" style="font-size: 34px;color: #333">
              {{ this.checkInfo.anonymousNumber }}
          </div>
          <div class="infoBox" v-else-if="this.checkInfo.anonymousNumber.length > 9" style="font-size: 14px;color: rgb(214, 7, 52)">
              {{ this.checkInfo.anonymousNumber }}
          </div>
          <div class="infoBox" v-else>
              暂无
          </div>
        </el-form-item>
        <el-form-item label="" >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        </el-form-item>
        
      </el-form>
    </div>
  </div>
</template>
<script>
import { isValidID } from '@/utils/validate'
import { getNumber } from '@/api/bigScreen.js'

export default {
  data () {
    var validateIDNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('身份证号'))
      }
      if (!isValidID(value)) {
        callback(new Error('请输入正确的身份证号'))
      } else {
        callback()
      }
    }
    return {
      checkInfo: {
        anonymousNumber: ''
      },
      ruleForm: {
        IDNumber: ''
      },
      rules: {
        IDNumber: [
          { required: true, validator: validateIDNumber, trigger: 'blur' }
        ]
      },
      // qqq: ['230202199710071020', '220323199701071227', '211382199706303727', '410926199706180825', '412725199404171127', '211302199706090424', '320382199810306244', '211102199702060024', '410621199807180017', '210623199807116539', '210727199611264821', '210283199709170528', '412801199903290811', '210404199503291813', '211481199701032218', '210881199710293525', '141124199802010219', '210282199711150642', '210211199801204514', '210114199803180329', '370304199710232524', '210203199603270043', '21110319970304062X', '220302199811130222', '130102199712100623', '220211199705024224', '210603199710065020', '411502199708080519', '15042919970726122X', '410102199707300038', '211021199803213521', '532627199707270047', '371083199608270524', '13108119960608101X', '34250119980224482X', '370830199804142925', '231026199702140322', '131102198704190813', '612326199805015610', '210623199705043041', '150402199806082729', '230822199301267821', '210803199712031028', '210303199511102312', '150428199312311222', '211322199803022023', '210211199309037427', '21062319970522570X', '220382199508200242', '610423199807030018', '211481199806290221', '211302199705081227', '210881199709151829', '530381199512183728', '211324199801235626', '150429199807240020', '211003199808202220', '341204199711050810', '370322199802220224', '350301199802080027', '210902199505061514', '21138219970529542X', '150428199002281224', '211481199702175624', '210882199805060325', '211382199802162223', '210321198809080249', '210502199501241823', '211103199609031719', '371423199808053423', '211402199801115023', '210882199909201823', '210411198702203221', '210283199809023621', '211381199612064327', '433122199811150027', '210681199804284741', '210682199712051525', '211103199805263023', '410504199707181010', '372926199901267327', '210682199811270029', '210282199806268424', '150429199712220027', '21110319920811234X', '230207199808110413', '500233199602163462', '410326199705115527', '211122199403051940', '210623199701256779', '342401199708291325', '15232119981210482X', '21020319881004401X', '152723199801084821', '211221199602050624', '230128199810124060', '211422199402054820', '210202199804261243', '211121199804220243', '610125199610140025', '220181199902040016', '210682199801313267', '152525199801180014', '52272719970402002X', '211103199403190327', '370683199702195526', '362202199508014453', '211381199812260410', '130733199803230025', '210212199404165941', '410822199712020560', '341281199611151027', '211322199508124529', '211011199605034722', '422823199712010661', '230231199705041021', '211381199802244927', '210882199812300040', '211382199802254128', '372924199803250027', '340822199806200564', '610423199901063422', '211103199805202714', '211021199804170826', '232721199103091028', '371324199812179118', '152822199710076622', '210282199805212613', '210624199904127527', '210203198204255562', '21122419931025494X', '211102199309272522', '610624199710214248', '411421199711231617', '210922199806257524', '210381199008305621', '370785199807132327', '110228199611133886', '410183199606231019', '21050419930304002X', '211303199810313225', '371525199708141723', '210702199806091011', '411121199711013525', '230524199803010424', '37132719980825492X', '211282199603210223', '210881199710080423', '210881198604010021', '341281199706119249', '522422199602160613', '610125199809010025', '371082199803120066', '21028219970306172X', '211102199503101014', '511923199803206973', '211102199710100524', '152727199701271027', '210212199804264527', '21028319960831051X', '150430199710290924', '210282199507055330', '211382199506125444', '230129199706270312', '370826199802165125', '430422199806300047', '211121199812112023', '51018219971228121X', '230203199012221446', '37082919921017174X', '211021199806174126', '150404199801240268', '350681199712290010', '61012119940505646X', '612322199801200020', '211223199609050822', '210283198506140025', '239005199709203424', '211103199803293747', '211421199703280227']
      qqq: ['211103199803293747', '612322199801200020', '211021199806174126', '37082919921017174X', '350681199712290010', '150404199801240268', '211223199609050822', '210283198506140025', '211421199703280227', '239005199709203424', '61012119940505646X']
    }
  },
  methods: {
    // 循环抽号
    aaa (list) {
      list.map(v => {
        let para = {
          studentIdcard: v
        }
        getNumber(para).then(res => {
          console.log(res)
        })
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.checkInfo = {
            anonymousNumber: ''
          }
          getNumber({
            studentIdcard: this.ruleForm.IDNumber
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success(`区号成功，号码为${res.data.anonymousNumber}`)
              this.checkInfo.anonymousNumber = res.data.anonymousNumber
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.checkInfo = {
        anonymousNumber: ''
      }
      this.ruleForm = {
        IDNumber: ''
      }
      this.$refs[formName].resetFields()
    }
  },
  created () {
    // this.aaa(this.qqq)
  }
}
</script>

<style lang='scss'>
  body{
    overflow: hidden !important;
  }
  .bigScreenBox{
    background: #fff;
    font-family: system-ui;
    height: 100vh;
    width: 100%;
    padding: 10px;
    min-width: 900px;
    display: flex;
    flex-direction: column;
    .innerBox{
      border: 1px solid #00796B;
      box-shadow: 0 1px 2px #00796B50;
      background: #00796B10;
      border-radius: 6px;
      width: 600px;
      padding: 60px 20px;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title{
        font-size: 30px;
        padding: 40px 0;
        font-weight: 600;
      }
      .infoBox{
        height: 100px;
        width: 300px;
        padding: 0 20px;
        word-break: break-all;
        border: 1px solid #00796B50;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
      }
    }
  }
</style>